<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="static/styles/reset.css" />
		<link rel="stylesheet" type="text/css" href="static/styles/common.css"/>
		<link rel="stylesheet" type="text/css" href="static/styles/org.css"/>
		<script src="static/scripts/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/scripts/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/scripts/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/scripts/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<title>机构信息</title>
	</head>
	<body>
		<div class="body body_gray" id="app">
			<div id="header" class="fixed blue">
				<a href="javascript:history.go(-1);" class="header_back">
	        		<img src="static/images/nav_back.png"/>
	        	</a>
				<h1 class="title">机构信息</h1>
				<div class="header_btn_right">
					<img class="add_icon" src="static/images/add.png"/>
				</div>
			</div>
			<div class="page_body">
				<div id="scroll_wrapper" >
					<div class="personal_list">
						<span class="scroller_pullUp"  v-if="static == 1">
							<img class="loading" src="static/images/loading.svg">
							<span class="pullup_msg">加载中...</span>
						</span>
						<div class="item">
							<div class="item_img">
								<img src="static/images/pic_02.png"/>
							</div>
							<div class="item_body">
								<h5 class="title">
									巴州尉犁县里木香库木库勒村
								</h5>
								<p class="address">
									<img src="static/images/loca_gray.png"/>
									塔里木香库木库勒村库木库勒路
								</p>
								<p class="personal">
									<img src="static/images/fuze.png"/>
									木合塔尔 · 麦提努尔
								</p>
								<a href="org_update.html" class="person_nums">
									<img src="static/images/bianji.png"/>
									编辑
								</a>
							</div>
						</div>
		

						<div class="item" v-for="(item,index) in dataList" :key="index">
							<div class="item_img">
								<img :src="item.img"/>
							</div>
							<div class="item_body">
								<h5 class="title">
									{{item.title}}
								</h5>
								<p class="address">
									<img src="static/images/loca_gray.png"/>
									{{item.address}}
								</p>
								<p class="personal">
									<img src="static/images/fuze.png"/>
									{{item.user}}
								</p>
								<a href="org_update.html" class="person_nums">
									<img src="static/images/bianji.png"/>
									编辑
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			
			
		</div>
		
		<script type="text/javascript">
			var w = new Vue({
				el:'#app',
				data:{
					static:'',	//当前状态（正在加载，已加载）
					scroll:'',	//scrol对象
					is_r:false, //是否是正在加载状态
					dataList:[{
						img:'static/images/pic_02.png',
						title:'巴州尉犁县里木香库木库勒村',
						address:'塔里木香库木库勒村库木库勒路',
						user:'木合塔尔 · 麦提努尔'
					},{
						img:'static/images/pic_02.png',
						title:'巴州尉犁县里木香库木库勒村',
						address:'塔里木香库木库勒村库木库勒路',
						user:'木合塔尔 · 麦提努尔'
					}]
				},
				mounted:function () {
					var ctx = this;
					this.$nextTick(function(){
						ctx.initScroll()
					})
    			},
				methods:{
					//初始化scroll
					initScroll:function(){
						var ctx = this ;
						this.scroll = new iScroll("scroll_wrapper",{
							topOffset: 0,
							//上拉时触发
							onScrollMove: function(){
								if(this.y <= ( this.wrapperH - this.scroller.clientHeight -50) && ctx.is_r == false){
									ctx.pullUp()
								}
							
							},
							onScrollEnd: function(){
								//上拉之后如果触发刷新则 状态图标值为1 显示loading状态
								if(ctx.is_r == true){
									ctx.static = 1;
								}
							}
						})
					},
					pullUp:function(){
						var ctx = this;
						this.is_r = true;
						//请求数据
						axios.get('static/mock.json').then(function(res){
							res.data.data.map(item=>{
								ctx.dataList.push(item);
							})
							ctx.$nextTick(function(){
								ctx.static = "";
								//加载完成状态
								ctx.is_r = false;
								
								ctx.scroll.refresh();
							})
		
						})

					}
				}
			})

		</script>
	</body>
</html>
